<template>
    <view v-if="show">
        <view v-if="list.length" class="concern">
            <view class="list" v-for="(item,key) in list">

                <view @tap="read(item,key)" class="list_left">
                    <image :src="item.user.avatar" class="img"></image>
                    <view class="content">
                        <view class="title">
                            <view>{{item.user.name}}</view>
                            <view class="date">{{strToTime(item)}}</view>
                        </view>
                        <view class="des">{{item.content}}
                            <text v-if="!item.read" class="num font-semibold" style="display: inline-block;background: red;border-radius:12upx;width: 12upx;height: 12upx;float: right"></text>
                        </view>

                    </view>
                </view>
            </view>

        </view>
        <view v-else>
            <template v-if="typeId==1">
                <view class="font-regular"
                      style="color:#664E37;font-size: 26upx;text-align: center;margin-top:480upx;opacity: .5">
                    暂时没有新评论<br/>快去评论区互动吧~
                </view>
                <button class='pop_btn' style="margin-top: 20upx" plain="true"
                        @tap="redirect('/pages/index/index')">
                    去评论
                </button>
            </template>


            <template v-if="typeId==2">
                <view class="font-regular"
                      style="color:#664E37;font-size: 26upx;text-align: center;margin-top:480upx;opacity: .5">
                    暂时没有新的动态<br/>快去关注几个好友一起读书吧~
                </view>
                <button class='pop_btn' style="margin-top: 20upx" plain="true"
                        @tap="redirect('/pages/index/index')">
                    去评论
                </button>
            </template>


            <template v-if="typeId==3">
                <view class="font-regular"
                      style="color:#664E37;font-size: 26upx;text-align: center;margin-top:480upx;opacity: .5">
                    暂时没有新的关注<br/>快去关注你喜欢的朗读人吧~
                </view>
                <button class='pop_btn' style="margin-top: 20upx" plain="true"
                        @tap="redirect('/pages/index/index')">
                    去评论
                </button>
            </template>

            <template v-if="typeId==4">
                <view class="font-regular"
                      style="color:#664E37;font-size: 26upx;text-align: center;margin-top:480upx;opacity: .5">
                    暂时没有新的点赞<br/>把作品分享给好友是获赞的秘籍哦~
                </view>
                <button class='pop_btn' style="margin-top: 20upx" plain="true"
                        @tap="redirect('/pages/index/index')">
                    去评论
                </button>
            </template>
        </view>
    </view>

    </view>

    </view>
</template>

<script>
  import Request from '@/utils/request.js'
  import tool from '@/utils/tool.js'
  export default {
    name: "index",
    data() {
      return {
        typeId:0,
        list: 0,
        page: 0,
        show:0
      }
    },
    created: function () {
      // this.getList();
    },
    onLoad:function(param){
      this.typeId=param.id;
      this.getList();
    },
    methods: {
      redirect(url){
        uni.navigateTo({
          url:url
        })
      },
      strToTime(time){
        if(!time)
          return '';
        return tool.timeToString(time.created_at,'YYYY-MM-DD HH:mm');
      },
      getList(){
        Request.get('/notice/message?@sort=created_at.desc&mode='+this.typeId).then((res)=>{
          this.list=res.data;
          this.show=1;
        })
      },

      read(item,key){
        this.list[key]['read']=1;
        Request.get('/notice/message/'+item.id).then(()=>{

        })

        // console.log(this.typeId,'this.model');
        if(this.typeId==3){
          uni.navigateTo({
            url:'/pages/my/friend_dynamics/index?id='+item.user.id
          })
        }else{
          uni.navigateTo({
            url:'/pages/tape/record?id='+item.target_id
          })
        }
      }
    }
  }
</script>

<style lang='scss'>
    .pop_btn{
        background: #FCB300 !important;
        border: none !important;
        width: 180upx;
        height: 60upx;
        color:white !important;
        font-weight: $font-medium;
        font-size: 26upx;
        line-height: 60upx;
        border-radius: 80upx;
        margin: auto;
    }

    .concern{
        padding: 0upx 55upx;
        .list{
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 2upx solid #f2f2f2;
            padding: 39upx 0;
            .list_left{
                display: flex;
                align-items: center;
                .img{
                    width: 100upx;
                    height: 100upx;
                    display: block;
                    border-radius: 50%;
                }
                .content{
                    width: 520upx;
                    padding-left: 20upx;
                    .title{
                        width: 100%;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        font-size: $uni-font-size-base;
                        color: $uni-color-664e37;
                        .date{
                            font-size: $uni-font-size-sm;
                        }
                    }
                    .des{
                        width: 100%;
                        overflow: hidden;
                        text-overflow:ellipsis;
                        white-space: nowrap;
                        padding-top: 16upx;
                        font-size: $uni-font-size-14;
                        color: $uni-color-876a48;
                    }
                }
            }
        }
    }

</style>
